<template>
    <div class="app-index">
        <mt-swipe class="swipe-banner" :auto="4000">
            <mt-swipe-item class="swipe-item" v-for="swipe in swipes">
                <div class="swipe-image">
                    <img class="blur-bg" :src="swipe.thumb">
                    <img :src="swipe.thumb" :alt="swipe.title">
                </div>
                <div class="swipe-text">
                    <a :href="swipe.url" target="_blank">
                        <h4>{{swipe.title}}</h4>
                        <p>{{swipe.description}}</h4>
                    </a>
                </div>
            </mt-swipe-item>
        </mt-swipe>
        <div class="action-button">
            <span class="button iconfont icon-call"></span>
        </div>
        <index-nav-grid class="index-nav-grid"></index-nav-grid>
    </div>
</template>
<script>
    import config, { fetchRest } from "../config";
    import IndexNavGrid from "./Index-Nav-Grid";
    export default {
        name: 'index',
        components: { IndexNavGrid },
        data() {

            function sleep(time) {
                return new Promise(resolve => {
                    setTimeout(resolve, time)
                });
            }
            async function getData() {
                var slides = await fetchRest("slide?type=2")
                slides.forEach(silde => silde.thumb = config.api_base_url + silde.thumb);
                res.swipes = slides;
            }
            getData();
            var res = {
                swipes: []
            };
            return res;
        }
    }
</script>
<style scoped>
    .swipe-banner{
        height: 290px;
        box-shadow: 0px 1px 2px rgba(77, 182, 172, 0.8);
    }
    .swipe-image{
        height: 190px;
        position: relative;
    }
    .swipe-item img{
        max-width: 100%;
        max-height: 100%;
    }
    .swipe-item .blur-bg{
        width: 100%;
        height: 100%;
        filter: blur(10px);
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
    }
    .swipe-text{
        height: 100px;
        background-color: rgb(77, 182, 172);
    }
    .swipe-text{
        font-size: 20px;
        text-align: left;
        box-sizing: border-box;
        padding: 25px 35px;
    }
    .swipe-text a{
        text-decoration: none;
        color: #EEE;
    }
    .swipe-text a:active{
        text-decoration: underline;
    }
    .swipe-text h4,.swipe-text p{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
    }

    .action-button{
        width: 0;
        height: 0;
        position: relative;
        left: calc(90% - 50px);
        top: -25px;
    }
    .action-button>.button{
        display: block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color:rgb(255, 82, 82);
        color:white;
        box-shadow: 0px 1px 2px #666;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        
    }
    .index-nav-grid{
        width:90%;
        margin: 45px auto 0 auto;
    }
</style>